<template>
	<view class="mainLayout" :style="getMinHeight()">

		<view class="welcome card">
			<view class="icon">
				<image src="@/static/images/index/crown.png" mode=""></image>
			</view>
			<view class="tip">
				<view class="title">欢迎使用记账小程序</view>
				<view class="content">感谢您的使用，该小程序为个人作品，仅供展示</view>
			</view>
		</view>

		<view class="month card">
			<view class="title">
				<view class="text">预算</view>
				<view class="alter">
					<text>制定</text>
					<uni-icons type="right" size="15"></uni-icons>
				</view>
			</view>
			<view class="detail">
				<view class="tip">
					<text>花费</text>
					<text>预算</text>
				</view>
				<view class="amount">
					<text>¥ 900.00</text>
					<text>¥ 3,000.00</text>
				</view>
				<view class="progress">
					<view class="progress-bar">
						<text>30.0%</text>
					</view>
				</view>
				<view class="date">
					<text>2024-05-01</text>
					<text>2024-05-31</text>
				</view>
			</view>
		</view>

		<uni-collapse class="payHistory card">
			<uni-collapse-item open title="支付历史" border>
				<view class="content">
					<view class="list">
						<view class="day">
							<view class="date">
								今天 2024-04-29
							</view>
							<view class="amount">
								-¥256.34
							</view>
						</view>
						<view class="detail">
							<type-icon class="icon" type="education" :white="true"></type-icon>
							<view class="describe">
								<view class="title">消费标题</view>
								<view class="text">消费内容123123123</view>
							</view>
							<view class="amount">-¥23.50</view>
						</view>
						<view class="detail">
							<type-icon class="icon" type="health" :white="true"></type-icon>
							<view class="describe">
								<view class="title">消费标题</view>
								<view class="text">消费内容123123123</view>
							</view>
							<view class="amount">-¥23.50</view>
						</view>
						<view class="detail">
							<type-icon class="icon" type="education" :white="true"></type-icon>
							<view class="describe">
								<view class="title">消费标题</view>
								<view class="text">消费内容123123123</view>
							</view>
							<view class="amount">-¥23.50</view>
						</view>
					</view>
					<view class="more">
						<text>更多</text>
						<uni-icons type="right" color="#31D19E" size="16"></uni-icons>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		
		<view class="add">
			<image src="@/static/images/index/Combined Shape.png" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		getMinHeight
	} from "@/utils/system.js"
</script>

<style lang="scss" scoped>
	@import '@/common/style/type-icon.scss';
	.mainLayout {
		background: #f9f9ff;
		padding: 32rpx;

		.card {
			background: white;
			border-radius: 5rpx;
			box-shadow: 0px 4px 16px rgba(239, 245, 255, 1);
			margin-top: 32rpx;
		}

		.card:first-child {
			margin-top: 0;
		}

		.welcome {
			padding: 32rpx;
			display: flex;
			justify-content: space-between;

			.icon {
				width: 72rpx;
				height: 72rpx;
				background: linear-gradient(225.61deg, #E9B0FF 0%, #8A63E5 100%);
				border-radius: 36rpx;

				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 42rpx;
					height: 32rpx;
				}
			}

			.tip {
				width: 520rpx;

				.title {
					font-size: 28rpx;
					color: #1C1C1C;
					font-weight: 600;
				}

				.content {
					margin-top: 14rpx;
					font-size: 24rpx;
					color: #606060;
				}
			}
		}

		.month {
			padding: 24rpx 32rpx;

			.title {
				display: flex;
				justify-content: space-between;

				.text {
					font-size: 28rpx;
					line-height: 56rpx;
					color: #8A8A8A;
					letter-spacing: 5rpx;
				}

				.alter {
					height: 56rpx;
					width: 156rpx;
					padding: 16rpx 24rpx;
					border-radius: 28rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 2rpx solid rgb(210, 210, 210);

					text {
						font-size: 24rpx;
						font-weight: 600;
						letter-spacing: 5rpx;
						color: rgb(28, 28, 28);
					}
				}
			}

			.detail {
				margin-top: 32rpx;

				.tip {
					display: flex;
					justify-content: space-between;
					height: 20rpx;

					text {
						font-size: 22rpx;
						color: rgb(138, 138, 138);
						line-height: 20rpx;
					}
				}

				.amount {
					height: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					text {
						font-size: 28rpx;
					}

					text:first-child {
						color: rgb(28, 28, 28);
					}

					text:last-child {
						color: rgb(49, 209, 158);
					}
				}

				.progress {
					margin-top: 16rpx;
					height: 24rpx;
					position: relative;
					border-radius: 12rpx;
					background-color: rgba(236, 237, 243, 1);

					.progress-bar {
						width: 30%;
						height: 100%;
						border-radius: 12rpx;
						background:
							linear-gradient(to bottom, transparent, #fff 400rpx),
							linear-gradient(to right, #31D19E 20%, #6DE381);
						display: flex;
						align-items: center;
						justify-content: center;

						text {
							color: #fff;
							font-size: 20rpx;
							line-height: 20rpx;
						}
					}

				}

				.date {
					margin-top: 12rpx;
					height: 26rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					text {
						font-size: 22rpx;
						color: #8A8A8A;
					}

				}
			}
		}

		.payHistory {
			.content {
				margin: 6rpx 32rpx;
				border-top: 2rpx dotted #CCCCCC;

				.list {
					margin-top: 40rpx;

					.day {
						height: 32rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28rpx;
						font-weight: 600;
						margin-bottom: 32rpx;
					}

					.detail {
						margin-bottom: 32rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 64rpx;

						.icon {
							width: 64rpx;
							height: 64rpx;
						}

						.describe {
							flex: 1;
							padding-left: 24rpx;

							.title {
								color: #1C1C1C;
								font-size: 24rpx;
								font-weight: 600;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							.text {
								color: #8A8A8A;
								font-size: 24rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}

						.amount {
							font-size: 28rpx;
							font-weight: 600;
						}
					}
				}
				
				.more {
					height: 80rpx;
					border-top: 2rpx solid #CCCCCC;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #31D19E;
					letter-spacing: 4rpx;
				}
			}
		}
		
		.add {
			position: fixed;
			right: 20rpx;
			bottom: 150rpx;
			width: 110rpx;
			height: 110rpx;
			background: linear-gradient(181.8deg, #7EF192 0%, #2DC897 100%);
			border-radius: 50%;
			box-shadow: 4px 4px 12px -2px #76ED92;
			display: flex;
			justify-content: center;
			align-items: center;
			
			image {
				width: 47rpx;
				height: 47rpx;
			}
		}
	}
</style>